<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: wjk
 * @LastEditTime: 2020-12-23 17:29:29
 * @description: 商品图文详情
 -->
<template>
  <!-- 底部导航栏 -->
  <view class="CommodityIntro">
    <view class="intro-title">
      <image src="/static/images/commodity/dc_detail_decorate.png" />
      <span>商品详情</span>
      <image src="/static/images/commodity/dc_detail_decorate.png" />
    </view>
    <view class="goods-intro">
      <rich-text :nodes="nodes" />
      <!-- <b-image v-for="(item, index) in commodityIntroImageList" :key="index" class-name="commodity-intro-image" :src="item" mode="widthFix" /> -->
    </view>
  </view>
</template>
<script>
import { parseHtmlSync } from '@/components/jyf-Parser/libs/MpHtmlParser'
export default {
  name: 'CommodityIntro',
  components: {
  },
  props: {
    intro: {
      type: String,
      required: true,
      default: null
    },
    show: {
      type: Boolean,
      default: false // 弹窗是否显示
    }
  },
  data() {
    return {
      commodityIntroImageList: [],
      nodes: []
    }
  },
  created() {
    this.nodes = this.intro ? parseHtmlSync(this.intro.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;" ')) : []
    // this.commodityIntroImageList = this.intro
    /* const imgReg = /<img.*?(?:>|\/>)/gi
    const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i
    const arr = this.intro.match(imgReg)
    for (let i = 0; i < arr.length; i++) {
      const src = arr[i].match(srcReg)
      // 获取图片地址
      this.commodityIntroImageList.push(src[1])
    } */
  }
}
</script>
<style lang="scss" scoped>
.CommodityIntro {
  background-color: #fff;
  .intro-title {
    border-radius: 10px;
    background-color: #fff;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-text;
    image {width: 30rpx; height: 20rpx; margin: 0 10px;}
  }
}
</style>
